<template>
  <div class="input-select-div">
    <label class="input-text-lable">{{ inputLable }}</label>：
    <select class="input-select" ref="selectCombo">
      <option selected="selected" disabled="disabled"  style='display: none' value=''></option>
      <option class="input-select-option" v-for="item in comboData" v-bind:key="item.itemCode" :value="item.itemCode">{{item.itemCode}}:{{item.itemName}}</option>
    </select>
    <div class="err-msg-div"><span ref="err-msg" style="color: red"></span></div>
  </div>
</template>

<script>
import {postRequest} from "@/axio2";
import {validatorFunction} from "@/validate";

export default {
  name: "SelectComboComponent",
  data(){
    return{
      comboData:Array
    }
  },
  props:{
    inputLable:String,
    inputName:String,
    comboStaticData:[],
    validate:{
      type:String,
      default:()=>{
        "allTrue"
      }
    },
    groupCode:String
  },
  methods:{
    setComboData(data){
      if(data instanceof Array){
        this.comboData = data;
      }else if(data instanceof Object){
        let dataArr = [];
        for (let dataKey in data) {
          // eslint-disable-next-line no-prototype-builtins
          if (data.hasOwnProperty(dataKey)) {
            dataArr.push({'itemCode': dataKey, 'itemName': data[dataKey]});
          }
        }
        this.comboData = dataArr;
      }
    },
    validateValue:function () {
      let validateExcute = validatorFunction[this.validate];
      if (null != validateExcute) {
        let val = this.$refs["selectCombo"].value;
        let validateResult = validateExcute.call(validateExcute,val);
        this.$refs["err-msg"].innerText = validateResult;
        if ("" !== validateResult) {
          this.$refs["selectCombo"].style["background"] = "#f00";
          this.$refs["selectCombo"].style["filter"] = "Alpha(Opacity=30)";
          this.$refs["selectCombo"].style["opacity"] = "0.3";
          return false;
        }else{
          this.$refs["selectCombo"].style["background"] = "#fff";
          this.$refs["selectCombo"].style["filter"] = "Alpha(Opacity=100)";
          this.$refs["selectCombo"].style["opacity"] = "1.0";
          return true;
        }
      }
    },
    getInputValue(){
      if(this.validateValue){
        let name = this.inputName;
        let index = this.$refs["selectCombo"].selectedIndex ;
        return { "validate":true, "name": name , "value" : this.$refs["selectCombo"].options[index].value };
      }else{
        return { "validate":false };
      }
    },
    hookSetComboData(resp,component){
      this.setComboData(JSON.parse(resp.data.errorMsg)[this.groupCode]);
    }
  },
  beforeMount() {
    if(undefined!==this.comboStaticData){
      this.comboData = this.comboStaticData;
    }
    if(undefined!==this.groupCode){
      postRequest(
        "dict/forgeDictGet.do",
        {groupCodeArr:[this.groupCode]},
        this.hookSetComboData,
        null,
        this
      );
    }
    this.$parent.$emit("inputRegist",this.inputName,this);
  },
  destroyed() {
    this.$parent.$emit("inputUnRegist",this.inputName);
  }
}
</script>

<style scoped>
.err-msg-div{
  height: 15px;
  min-height: 15px;
  font-size: small;
  text-align: left;
  padding-left: 120px;
  padding-bottom: 3px;
}
.input-select-div{
  vertical-align: top;
  display: inline-block;
  width: 320px;
  padding-right: 20px;
  padding-bottom: 15px;
  text-align: right;
}
.input-text-lable{
  font-size: smaller;
}
.input-select{
  font-size: 15px;
  margin-left: 7px;
  width: 206px;
  border: 1px #bbbbbb solid;
  padding-right: 2px;
  border-radius: 5px;
}
.input-select-option{
  font-size: 15px;
  background: white;
}
</style>